<template>
	<view style="padding: 16rpx;" class="content">
		<view @click="clickMore" class="check-more-btn">
			<view class="more-line"></view>
			<text>销假记录</text>
		</view>
		<view class="form">
			<div @click="clickApplydate">
				<my-list propTitle="申请日期" :propValue="destroyForm.applydate" mustIcon :boldValue="true"
					valueColor="#121F2C" :boder="false" isIcon></my-list>
				<!-- <u-calendar :show="applycalendarShow" mode="single" @confirm="applyDatecalendaConfirm" @close="closeCalender"></u-calendar> -->
			</div>
			<view class="form-sub">
				<view>
					<span class="must-icon iconfont icon-must-fill2"></span>
					<text style="color: rgb(69, 74, 94)">考勤期间</text>
				</view>
				<view>
					<g-select v-model="destroyForm.pk_period" :tranOption="pk_periodOption"
						:props="{ label: 'yearmth', value: 'pk_period_b' }" electionClass="selevt-valueClass"
						placeholderClass="placeholderClass"></g-select>
					<span class="iconfont icon-jiantou list-icon"></span>
				</view>
			</view>
			<view class="form-sub">
				<view>
					<span class="must-icon iconfont icon-must-fill2"></span>
					<text style="color: rgb(69, 74, 94)">休假类别</text>
				</view>
				<view>
					<g-select v-model="destroyForm.pk_leavetype" :tranOption="pk_leavetypeOption" @change="leaveChange"
						placeholder="请选择休假类别" electionClass="selevt-valueClass" placeholderClass="placeholderClass">
					</g-select>
					<span class="iconfont icon-jiantou list-icon"></span>
				</view>
			</view>
			<view class="form-sub" v-show="false">
				<view>
					<span class="must-icon iconfont icon-must-fill2"></span>
					<text style="color: rgb(69, 74, 94)">班次属性</text>
				</view>
				<view>
					<g-select v-model="destroyForm.leaveshiftpro" :tranOption="leaveendprotypeOption"
						electionClass="selevt-valueClass" placeholderClass="placeholderClass"></g-select>
					<span class="iconfont icon-jiantou list-icon"></span>
				</view>
			</view>
			<!-- <view class="form-sub">
				<view>
					<span class="must-icon iconfont icon-must-fill2"></span>
					<text style="color: rgb(69, 74, 94)">销假班次</text>
				</view>
				<view>
					<g-select v-model="destroyForm.leaveoffshift" :tranOption="leaveoffshiftOption"
						electionClass="selevt-valueClass" placeholderClass="placeholderClass"></g-select>
					<span class="iconfont icon-jiantou list-icon"></span>
				</view>
			</view> -->


			<my-list propTitle="销假日期" propValue="" mustIcon :boder="false"></my-list>
			<view class="uni-pop-wrap">
				<view v-for="(item, index) in addTimeValue" class="uni-sub">
					<view class="pop-time-sub">
						<view @click="addclickStartTime(item, index)" class="start-time">
							<view class="start-time-title">开始时间</view>
							<view :style="[{ color: item.viewStar == '请选择' ? '#CDCDCD' : '#121F2C' }]">
								{{ item.viewStar }}
							</view>
						</view>
						<view @click="addclickEndtTime(item, index)" class="start-time">
							<view class="start-time-title">结束时间</view>
							<view :style="[{ color: item.viewEnd == '请选择' ? '#CDCDCD' : '#121F2C' }]">{{ item.viewEnd }}
							</view>
						</view>
						<view class="err-tips" v-if="item.timeRule">
							<span class="iconfont icon-shanchu"></span>
							<view class="error-tips-title">结束时间不能小于开始时间</view>
						</view>
					</view>
					<view @click="deleteTime(index)" class="uni-sub-delete" v-if="addTimeValue.length != 1">删除</view>
				</view>
			</view>
			<my-list propTitle="销假时长(自动计算)" :propValue="leaveDays+ '天'" boldValue mustIcon valueColor="#121F2C"
				:boder="false" isIcon></my-list>
			<itmister-date-picker ref="pickerst0" @dateConfirm="confirpicker"></itmister-date-picker>
			<itmister-date-picker ref="pickerst" @dateConfirm="confirEndpicker"></itmister-date-picker>
			<view class="confirm-btn">
				<my-button width="540" height="88" @click="commitLeavedes" v-show="handleAction == 1">确认提交</my-button>
			</view>
			<view class="confirm-btn">
				<my-button width="540" height="88" @click="changeLeavedes" v-show="handleAction==2&&propStatus==-1">确认修改
				</my-button>
			</view>
		</view>
		<view class="view-mask" v-show="handleAction==2&&propStatus!=-1"></view>
	</view>
</template>

<script>
	import service from '../../../common/service/new_file.js';
	import apiData from '../../../common/utils/apiData.js';
	import utils from '../../../common/utils/utils.js';
	export default {
		data() {
			return {
				//可选项
				pk_periodOption: [],
				pk_leavetypeOption: [],

				leaveendprotypeOption: [{
					value: '2',
					label: '上午'
				}, {
					value: '3',
					label: '下午'
				}],
				leavebeginproOption: [{
					value: '上午',
					label: '上午'
				}, {
					value: '下午',
					label: '下午'
				}, {
					value: '全天',
					label: '全天'
				}],
				//多个时间部分
				choicedIndex: '',
				addTimeValue: [{
					viewStar: '请选择',
					modeStar: '',
					viewEnd: '请选择',
					modeEnd: '请选择'
				}],

				//表单部分
				leaveoffshiftOption: [],
				destroyForm: {
					applydate: '',
					pk_period: '请选择',
					pk_leavetype: '请选择',
					leaveendpro: '请选择结束属性',
					leavebeginpro: '请选择开始属性',
					leaveoffshift: '1001A1100000000BOANJ', //出勤默认value
					destroyTime: [],
					leaveshiftpro: "2",
					leavebeginpro: null, //开始时间班次属性
					leaveendpro: null, //结束时间班次属性
				},
				leaveDays: 0,
				calendarShow: false,
				applycalendarShow: false,
				propItem: null,
				handleAction: 1, //1为新增，2为修改
				billno: '', //修改时的单据号
				leaveinfor: {
					leavedays: 15,
					realleavedays: "1.0",
					restedday: 13,
					approvestatus: '-1',
					ts: '',
					pk_leaveoff: ''
				},
				propStatus: '', //数据返回时当前单据的状态

			};
		},

		methods: {
			//多个时间js部分
			getModeEndTime(timeHalf, type) {
				let modeTime;
				if (type == 'end') {
					let hours = '13:00:00';
					let hours2 = '23:00:00';
					if (timeHalf.indexOf('上午') != -1) {
						modeTime = timeHalf.split('上午')[0] + ' ' + hours;
					} else if (timeHalf.indexOf('下午') != -1) {
						modeTime = timeHalf.split('下午')[0] + ' ' + hours2;
					}
				} else if (type == 'start') {
					let hours = '01:00:00';
					let hours2 = '13:00:00';
					if (timeHalf.indexOf('上午') != -1) {
						modeTime = timeHalf.split('上午')[0] + ' ' + hours;
					} else if (timeHalf.indexOf('下午') != -1) {
						modeTime = timeHalf.split('下午')[0] + ' ' + hours2;
					}
				}

				return modeTime;
			}, //重新组合选择出来的时间

			componentLeaveData() {
				let cloneTime = JSON.parse(JSON.stringify(this.addTimeValue));
				let _this = this
				//重新组合选择出来的时间
				let serviceTime = cloneTime.map(item => {
					let startTime;
					let endTime;
					return (item = {
						startTime: this.getModeEndTime(item.viewStar, 'start'),
						endTime: this.getModeEndTime(item.viewEnd, 'end')
					});
				});
				let leaveDays = this.CPU_leaveHour(serviceTime[0].startTime, serviceTime[0].endTime) / (1000 * 3600 * 24)

				function startpro(time) {
					//获取开始班次属性
					let startpro
					if (time.split(' ')[1] == '01:00:00') {
						startpro = "2"
					} else if (time.split(' ')[1] == '13:00:00') {
						startpro = "3"
					}
					return startpro
				}

				function endpro(time) {
					//获取结束时间班次属性
					let endpro
					if (time.split(' ')[1] == '13:00:00') {
						endpro = "2"
					} else if (time.split(' ')[1] == '23:00:00') {
						endpro = "3"
					}
					return endpro
				}

				let data = {
					applydate: this.destroyForm.applydate,
					leaveoffshift: this.destroyForm.leaveoffshift,
					pk_leavetype: this.destroyForm.pk_leavetype,
					pk_period: this.destroyForm.pk_period,
					realbegintime: serviceTime[0].startTime,
					realendtime: serviceTime[0].endTime,
					leavebeginpro: startpro(serviceTime[0].startTime), //开始属性
					leaveendpro: endpro(serviceTime[0].endTime), //结束属性
					leaveshiftpro: this.destroyForm.leaveshiftpro, //
					//销假额外信息
					leavedays: leaveDays, //休假天数
					realleavedays: this.leaveinfor.realleavedays, //
					restedday: this.leaveinfor.restedday, //
					approvestatus: this.leaveinfor.approvestatus
				};
				return data;
			},
			CPU_leaveHour(starttime, endtime) {
				let start = starttime
				let end = endtime
				if (start.indexOf("01:00:00") != -1) {
					start = start.split(" ")[0] + " " + "00:00:00"
				} else if (start.indexOf("13:00:00")) {
					start = start.split(" ")[0] + " " + "12:00:00"
				}
				if (end.indexOf("13:00:00") != -1) {
					end = end.split(" ")[0] + " " + "12:00:00"
				} else if (end.indexOf("23:00:00") != -1) {
					end = end.split(" ")[0] + " " + "00:00:00"
				}
				let startTimestamp = new Date(utils.getDateDiff(start)).getTime()
				let endTimestamp
				if (endtime.indexOf("23:00:00") != -1) {
					//苹果不认识24：00：00,若出现这个时间，侧时间戳加一天
					endTimestamp = new Date(utils.getDateDiff(end)).getTime() + 86400000
				} else {
					endTimestamp = new Date(utils.getDateDiff(end)).getTime()
				}
				let result = endTimestamp - startTimestamp
				return result;
			}, //计算两个时间距离的天数，后面逻辑判断半天的情况存在
			commitLeavedes() {
				let data = this.componentLeaveData();
				let isEmpty = false;
				for (let key in data) {
					if (!data[key] || data[key] == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入必填内容'
						});
						isEmpty = false;
						break;
					} else {
						isEmpty = true;
					}
				}
				console.log(data, 'data')
				if (isEmpty) {
					//符合规则
					let serviceData = apiData.destroyLeave(data);
					service.common(serviceData, {
						success: res => {
							uni.showToast({
								title: "操作成功,即将前往列表"
							})
							setTimeout(() => {
								uni.navigateTo({
									url: "./destroyList"
								})
							}, 1500)
						}
					});
				}
			},
			componentChangeLeaveData() {
				//修改时的data
				let cloneTime = JSON.parse(JSON.stringify(this.addTimeValue));
				let _this = this
				//重新组合选择出来的时间
				let serviceTime = cloneTime.map(item => {
					let startTime;
					let endTime;
					return (item = {
						startTime: this.getModeEndTime(item.viewStar, 'start'),
						endTime: this.getModeEndTime(item.viewEnd, 'end')
					});
				});
				let leaveDays = this.CPU_leaveHour(serviceTime[0].startTime, serviceTime[0].endTime) / (1000 * 3600 * 24)

				function startpro(time) {
					//获取开始班次属性
					let startpro
					if (time.split(' ')[1] == '01:00:00') {
						startpro = "2"
					} else if (time.split(' ')[1] == '13:00:00') {
						startpro = "3"
					}
					return startpro
				}

				function endpro(time) {
					//获取结束时间班次属性
					let endpro
					if (time.split(' ')[1] == '13:00:00') {
						endpro = "2"
					} else if (time.split(' ')[1] == '23:00:00') {
						endpro = "3"
					}
					return endpro
				}
				let data = {
					applydate: this.destroyForm.applydate,
					leaveoffshift: this.destroyForm.leaveoffshift,
					pk_leavetype: this.destroyForm.pk_leavetype,
					pk_period: this.destroyForm.pk_period,
					realbegintime: serviceTime[0].startTime,
					realendtime: serviceTime[0].endTime,
					leavebeginpro: startpro(serviceTime[0].startTime), //开始属性
					leaveendpro: endpro(serviceTime[0].endTime), //结束属性
					leaveshiftpro: this.destroyForm.leaveshiftpro, //
					//销假额外信息
					leavedays: leaveDays, //休假天数
					realleavedays: this.leaveinfor.realleavedays, //
					restedday: this.leaveinfor.restedday, //
					approvestatus: this.leaveinfor.approvestatus,
					ts: this.leaveinfor.ts,
					pk_leaveoff: this.leaveinfor.pk_leaveoff
				}
				return data
			},
			changeLeavedes() {
				let data = this.componentChangeLeaveData();
				let isEmpty = false;
				for (let key in data) {
					if (!data[key] || data[key] == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入必填内容'
						});
						isEmpty = false;
						break;
					} else {
						isEmpty = true;
					}
				}
				if (isEmpty) {
					//符合规则
					let billno = this.billno;
					let serviceData = apiData.destroyLeave(data, this.billno);
					service.common(serviceData, {
						success: res => {
							uni.showToast({
								title: "修改成功,即将返回列表"
							})
							setTimeout(() => {
								uni.navigateTo({
									url: "./destroyList"
								})
							}, 1500)
						}
					});
				}
			},
			clickMore() {
				uni.navigateTo({
					url: './destroyList'
				});
			},
			addTime() {
				//添加时间
				this.addTimeValue.push({
					viewStar: '请选择',
					modeStar: '',
					viewEnd: '请选择',
					modeEnd: '请选择'
				});
			},
			leaveChange(val) {},

			deleteTime(index) {
				this.addTimeValue.splice(index, 1);
			},
			confirEndpicker(value) {
				//开始时间的确认
				this.addTimeValue[this.choicedIndex].viewEnd = value.date + '' + value.halfDays;
			},
			confirpicker(value) {
				//结束时间的确认
				this.addTimeValue[this.choicedIndex].viewStar = value.date + '' + value.halfDays;
			},
			addclickStartTime(item, index) {
				//开始时间点击
				this.$refs.pickerst0.show();
				this.choicedIndex = index;
			},
			addclickEndtTime(item, index) {
				//结束时间点击
				this.choicedIndex = index; //当前点击的时间index
				this.$refs.pickerst.show();
			},

			closeCalender() {
				//关闭日历
				this.applycalendarShow = false;
				this.calendarShow = false;
			},
			applyDatecalendaConfirm(e) {
				//申请日期提交事件
				this.destroyForm.applydate = e[0];
				this.applycalendarShow = false;
			},
			clickApplydate() {
				//申请日期点击
				this.applycalendarShow = true;
			},
			//picker选择器部分
			//picker选择器部分
			clicDestroyDate() {
				//销毁日期点击
				this.calendarShow = true;
			},
			calendaConfirm(e) {
				//销毁日期确认
				this.destroyForm.destroyTime[0] = e[0];
				this.destroyForm.destroyTime[1] = e[e.length - 1];
				this.calendarShow = false;
			},
			getWorkPeriod() {
				let _this = this;
				let data = apiData.setWorkPeriodData();
				service.common(data, {
					success: res => {
						let newArr = JSON.parse(JSON.stringify(res.data.VALUES));
						this.getLeaveType();
					}
				});
			},
			// getLeaveShift(pk_leavetype) {
			// 	//获取班次
			// 	let _this = this;
			// 	let data = apiData.getLeaveTypeData('leaveshift', pk_leavetype);
			// 	service.common(data, {
			// 		success: function(res) {
			// 			let leaveObj = res.data.VALUES[0];
			// 			let leaveOption = [];
			// 			for (let key in leaveObj) {
			// 				leaveOption.push({
			// 					value: key,
			// 					label: leaveObj[key]
			// 				});
			// 			}
			// 			_this.leaveoffshiftOption = leaveOption;
			// 		},
			// 		fail: function(res) {
			// 			console.log(res);
			// 		},
			// 	});
			// },
			getFormInfor(obj) {
				this.propStatus = obj.appStatus
				// this.destroyForm.applydate= obj.tshead
				//销假额外信息
				this.leaveinfor.leavebeginpro = obj.leavebeginpro
				this.leaveinfor.leaveendpro = obj.leaveendpro
				this.leaveinfor.leavedays = obj.leavedays
				this.leaveinfor.realleavedays = obj.realleavedays
				this.leaveinfor.restedday = obj.restedday
				this.leaveinfor.approvestatus = obj.appStatus
				this.leaveinfor.ts = obj.ts
				this.leaveinfor.pk_leaveoff = obj.pk_leaveoff
				//回显基础信息
				this.destroyForm.leaveshiftpro = obj.leaveshiftpro
				this.destroyForm.pk_period = obj.pk_period;
				this.destroyForm.pk_leavetype = obj.pk_leavetype;
				this.destroyForm.leavebeginpro = obj.leavebeginpro;
				this.destroyForm.leaveendpro = obj.leaveendpro;
				this.destroyForm.leaveoffshift = obj.leaveshift;
				let timeArr = obj.timeArr.map(
					item =>
					(item = {
						viewEnd: item.viewEndtime,
						viewStar: item.viewStarttime
					})
				);
				this.billno = obj.billno;
				this.destroyForm.applydate = obj.tshead;
				this.addTimeValue = timeArr;
			},
			init() {
				this.leaveoffshiftOption = JSON.parse(uni.getStorageSync('leaveType'));
				this.pk_leavetypeOption = JSON.parse(uni.getStorageSync('leaveShift'));
				this.destroyForm.applydate = utils.getNowTime();
				this.pk_periodOption = JSON.parse(uni.getStorageSync('workPeriod'));

				//获取当前日期考勤期间
				let nowPeriod = utils.getNowTime().split("-")[0] + "-" + utils.getNowTime().split("-")[1]
				let fileterArr = this.pk_periodOption.filter(item => item.yearmth == nowPeriod)[0]
				if (fileterArr.length != 0) {
					this.destroyForm.pk_period = fileterArr.pk_period_b
				}
				//
			}
		},
		watch: {
			addTimeValue: {
				handler(n, o) {
					let cloneTime = JSON.parse(JSON.stringify(this.addTimeValue));
					let _this = this
					//重新组合选择出来的时间
					let serviceTime = cloneTime.map(item => {
						let startTime;
						let endTime;
						return (item = {
							startTime: this.getModeEndTime(item.viewStar, 'start'),
							endTime: this.getModeEndTime(item.viewEnd, 'end')
						});
					});
					let startTimeStamp = new Date(utils.getDateDiff(serviceTime[0].startTime)).getTime()
					let endTimeStamp = new Date(utils.getDateDiff(serviceTime[0].endTime)).getTime()
					if (startTimeStamp >= endTimeStamp) {
						uni.showToast({
							icon: "none",
							title: "开始时间不能小于结束时间",
						})
						this.addTimeValue = [{
							viewStar: '请选择',
							modeStar: '',
							viewEnd: '请选择',
							modeEnd: '请选择'
						}]
					}
					this.leaveDays = this.CPU_leaveHour(serviceTime[0].startTime, serviceTime[0].endTime) / (1000 * 3600 *
						24)
				},
				deep: true,
			},
			destroyForm: {
				handler(n, o) {
					if (n.pk_leavetype != o.pk_leavetype) {
						this.getLeaveShift(n.pk_leavetype);
					}
				},
				deep: true
			}
		},
		computed: {
			Cpu_leaveDays() {
				let serviceTime = cloneTime.map(item => {
					let startTime;
					let endTime;
					return (item = {
						startTime: this.getModeEndTime(item.viewStar, 'start'),
						endTime: this.getModeEndTime(item.viewEnd, 'end')
					});
				});
				let leaveDays = this.CPU_leaveHour(serviceTime[0].startTime, serviceTime[0].endTime) / (1000 * 3600 * 24)
				return leaveDays
			}
		},

		onLoad(item) {
			this.init();
			if (item.item) {
				this.handleAction = 2;
				this.propItem = JSON.parse(item.item);
				this.getFormInfor(this.propItem);
			} else {
				this.handleAction = 1;
			}
		}
	};
</script>

<style lang="scss">
	.view-mask {
		width: 100vw;
		height: 90vh;
		background: red;
		position: absolute;
		bottom: 0;
		opacity: 0;
	}

	.list-icon {
		color: rgb(167, 163, 163);
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.form-sub {
		padding: 30rpx 0;
		padding-right: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.must-icon {
		color: red;
	}

	.reduce-time {
		color: #007aff;
		width: 130rpx;
		font-weight: 600;
		margin-left: 30rpx;
		font-size: 26rpx;
	}

	.content {
		background: #ffffff;
	}

	.confirm-btn {
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.uni-sub {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 6rpx;
		margin: 16rpx 40rpx;
		border-bottom: 2rpx dotted #e6e6e6;

		.uni-sub-delete {
			color: red;
			padding-right: 30rpx;
			font-size: 28rpx;
		}
	}

	.start-time {
		width: 500rpx;
		display: flex;
		margin: 10rpx 0;
	}

	.start-time-title {
		display: flex;
		align-items: center;
		margin-right: 50rpx;
		font-size: 30rpx;
	}

	.check-more-btn {
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: 35rpx;
		color: #007aff;
		justify-content: flex-end;

		.more-line {
			width: 10rpx;
			height: 40rpx;
			background: #007aff;
			border-radius: 6rpx;
			margin: 0 10rpx;
		}
	}

	.form {
		// border-top: 2rpx solid red;
	}
</style>
